<template>
  <div class="content-wrapper">
    <div class="content-header">
      <el-page-header @back="goBack" content="成员管理"> </el-page-header>
    </div>
    <div class="content-container">
      <el-form :inline="true" :model="listQuery" class="filter-container">
        <el-form-item>
          <el-button
            class="filter-item"
            size="small"
            round
            icon="el-icon-plus"
            @click="getUserIdList"
            >添加成员</el-button
          >
        </el-form-item>
      </el-form>
      <el-table :data="dataList" style="width: 100%" height="700">
        <el-table-column prop="userName" label="用户名" min-width="200px">
        </el-table-column>
        <el-table-column label="角色" width="200px">
          <template slot-scope="{ row }">
            <span>{{ row.role == 0 ? '成员' : '管理员' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="joinTimeStr" label="加入时间" width="160px">
        </el-table-column>
        <el-table-column width="150px" align="left">
          <template slot-scope="{ row }">
            <el-tag v-if="row.userId == user.userId" type="success"
              >本人</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" width="60px">
          <template slot-scope="{ row }">
            <el-dropdown
              v-if="row.userId != user.userId"
              trigger="click"
              class="filter-item"
            >
              <el-button type="text" class="el-icon-more" />
              <el-dropdown-menu slot="dropdown" class="user-dropdown">
                <el-dropdown-item
                  v-if="row.role == 0 && row.createUserId == user.userId"
                  @click.native="updateRole(row)"
                  >设为管理员</el-dropdown-item
                >
                <el-dropdown-item
                  v-if="row.role == 1 && row.createUserId == user.userId"
                  @click.native="updateRole(row)"
                  >降为成员</el-dropdown-item
                >
                <el-dropdown-item
                  v-if="row.role == 0"
                  @click.native="deletedUser(row)"
                  >踢出团队</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="邀请人员"
        :visible.sync="inviteVisible"
        width="30%"
        @close="inviteClose(done)"
      >
        <!-- <SearchPersonnelAddUser
            :teamId="this.listQuery.teamId"
            :userIdList="userIdList"
            @selection="getDataList"
          ></SearchPersonnelAddUser> -->
        <SelectPersonnelTree
          :key="keyTime"
          :review.sync="reviews"
        ></SelectPersonnelTree>
        <span slot="footer" class="dialog-footer">
          <el-button @click="inviteVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveInvite">邀 请</el-button>
        </span>
      </el-dialog>
    </div>
    <SearchPersonnelAddUser
      :SearchUserListData="SearchUserListData"
      v-on:SearchUserList="SearchUserList"
    ></SearchPersonnelAddUser>
  </div>
</template>

<script>
import {
  listTeamUser,
  updateTeamUserRole,
  deletedTeamUser,
  inviteJoin
} from '@/api/uc/team'
import SelectPersonnelTree from '@/components/SelectPersonnel/selectPersonnelTree'
import SearchPersonnelAddUser from '@/components/SearchUser/SearchPersonnelAddUser'
export default {
  components: {
    SelectPersonnelTree,
    SearchPersonnelAddUser
  },
  name: 'index',
  data() {
    return {
      user: this.$store.state.user,
      listQuery: {
        teamId: null
      },
      dataList: [],
      invite: null,
      inviteVisible: false,
      reviews: null,
      keyTime: new Date().getTime(),
      userIdList: [],
      SearchUserListData: {}
    }
  },
  mounted() {
    this.listQuery.teamId = this.$route.params.teamId
    this.getDataList()
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    saveInvite() {
      //保存数据
      if (!this.reviews || this.reviews.length === 0) {
        this.$message.info('请选择邀请人员')
      }
      let reviews = this.reviews.map((item) => {
        return item.id
      })
      let saveData = {
        teamId: this.invite.teamId,
        userIdList: reviews
      }
      inviteJoin(saveData).then((res) => {
        this.$message.success('保存成功')
        this.getList()
        this.inviteVisible = false
      })
    },
    inviteClose() {
      //邀请对话框关闭
      this.invite = null
      this.reviews = null
    },
    inviteJoin(row) {
      //邀请加入调用
      this.keyTime = new Date().getTime()
      this.inviteVisible = true
      this.invite = row
      this.getList()
    },
    deletedUser(row) {
      //将用户踢出团队
      let deleteData = {
        teamId: row.teamId,
        userId: row.userId
      }
      deletedTeamUser(deleteData).then((res) => {
        this.$message.success('删除成功')
        this.getDataList()
      })
    },
    updateRole(row) {
      //修改用户角色
      let updateData = {
        teamId: row.teamId,
        userId: row.userId,
        role: row.role == 0 ? 1 : 0
      }
      updateTeamUserRole(updateData).then((res) => {
        this.$message.success('保存成功')
        this.getDataList()
      })
    },
    getUserIdList() {
      this.SearchUserListData = {
        dialogVisible: true,
        teamId: this.listQuery.teamId
      }
    },
    getDataList() {
      listTeamUser(this.listQuery).then((res) => {
        this.dataList = res.data
        this.userIdList = this.dataList.map((e) => e.userId)
      })
    },
    SearchUserList(data) {
      this.temp.participateUserId = []
      this.temp.StaffNameList = data
      data.forEach((item) => {
        this.temp.participateUserId.push(item.id)
      })
      this.$forceUpdate()
    }
  }
}
</script>

<style scoped>
</style>
